<template>
  <div id="app">
    <!--<router-view/>-->

    <div class="container-demo">
      <van-button type="default" @click="showDialog();">添加用户</van-button>
      <table>
        <thead>
        <tr>
          <td>姓名</td>
          <td>年龄</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in userData">
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
          <td>
            <van-button @click="delUser(item.id)" type="danger" size="small">删除</van-button>
            <van-button @click="updateUser(item.id)" type="primary" size="small">修改</van-button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加用户、修改用户弹窗begin -->
    <van-dialog
      v-model="showAddDialog"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field
        v-model="name"
        label="姓名"
        placeholder="请输入姓名"
      />
      <van-field
        v-model="age"
        label="年龄"
        placeholder="请输入年龄"
      />
    </van-dialog>
    <!-- 添加用户、修改用户弹窗end -->

  </div>
</template>

<script>
  import axios from 'axios'
  import { Dialog } from 'vant'

  export default {
    data() {
      return {
        // 姓名
        name: '',
        // 年龄
        age: '',
        // 用户id
        id: '',
        // 用户列表
        userData: [],
        // 是否显示弹窗
        showAddDialog: false
      }
    },
    mounted() {
      this.getAllUserList();
    },
    methods: {
      /**
       * 获取所有用户列表
       */
      getAllUserList () {
        this.$get('/userList').then((response) => {
          this.userData = response;
          console.log(response);
        })
      },
      /**
       * 添加用户
       */
      saveUser () {
        var params = {
          name: this.name,
          age: this.age
        };
        this.$post('/userList', params).then((response) => {
          this.getAllUserList();
        })
      },
      /**
       * 删除用户
       * @param id 用户id
       */
      delUser (id) {
        Dialog.confirm({
          title: '删除',
          message: '确定要删除？'
        }).then(() => {
          // 点击确定
          this.$delete('/userList/' + id).then((response) => {
            this.getAllUserList()
          })
        }).catch(() => {
          // 点击取消
        });
      },
      /**
       * 修改用户信息
       * @param id
       */
      updateUser (id) {
        this.showAddDialog = true;
        this.$get('/userList/' + id).then((response) => {
          this.name = response.name;
          this.age = response.age;
          this.id = response.id;
        })
      },
      /**
       * 修改--保存用户信息
       */
      updateSaveUser () {
        var params = {
          name: this.name,
          age: this.age
        };
        this.$put('/userList/' + this.id, params).then((response) => {
          this.getAllUserList();
        });
      },
      /**
       * 添加用户--显示弹窗
       */
      showDialog () {
        this.name = '';
        this.age = '';
        this.id = '';
        this.showAddDialog = true;
      },
      /**
       * 弹窗 确定与取消
       * @param action
       * @param done
       */
      beforeClose(action, done) {
        if (action === 'confirm') {
          var id = this.id;
          setTimeout(done, 1000);
          if (id != null || id != ''){
            // 修改
            this.updateSaveUser();
          } else {
            // 添加
            this.saveUser();
          }
        } else {
          done();
        }
      }
    }
  }
</script>

<style scoped>
  .container-demo table{
    width: 100%;
    text-align: center;
    border-collapse: collapse;
  }
  .container-demo table thead{
    background-color: #b7b7b7;
    height: 40px;
    line-height: 40px;
  }
  .container-demo table tbody tr{
    height: 50px;
    line-height: 50px;
  }
  .container-demo table tbody tr:hover{
    background-color: #f5f5f5;
  }
</style>
